<template>
  <div class="home">
    <!--  地位输入框  -->
    <section class="address-search">
      <section class="address">
        <van-dropdown-menu>
          <van-dropdown-item v-model="value1" :options="option1"/>
        </van-dropdown-menu>
      </section>

      <section class="search">
        <van-search v-model="value" placeholder="请输入搜索关键词"/>
      </section>
    </section>


    <!--  轮播  -->
    <Swipe></Swipe>

    <!--  列表   -->
    <van-row type="flex" justify="space-around" class="mt-20 pb-20 border-bottom">
      <van-col span="6" class="text-center">
        <van-image
            round
            width="2rem"
            height="2rem"
            src="https://img01.yzcdn.cn/vant/cat.jpeg"
        />
        <div @click="history">浏览足迹</div>
      </van-col>
      <van-col class="text-center" span="6">
        <van-image
            round
            width="2rem"
            height="2rem"
            src="https://img01.yzcdn.cn/vant/cat.jpeg"
        />
        <div>列表1</div>
      </van-col>
      <van-col class="text-center" span="6">
        <van-image
            round
            width="2rem"
            height="2rem"
            src="https://img01.yzcdn.cn/vant/cat.jpeg"
        />
        <div>列表1</div>
      </van-col>
    </van-row>

    <!--    tab-->
    <van-tabs v-model="active">
      <van-tab title="标签 1">
        <router-link to='list'>
          <van-card
              num="2"
              price="2.00"
              desc="描述信息"
              title="商品标题"
              thumb="https://img01.yzcdn.cn/vant/ipad.jpeg"
          />
        </router-link>

        <router-link to='list'>
          <van-card
              num="2"
              price="2.00"
              desc="描述信息"
              title="商品标题"
              thumb="https://img01.yzcdn.cn/vant/ipad.jpeg"
          />
        </router-link>
        <router-link to='list'>
          <van-card
              num="2"
              price="2.00"
              desc="描述信息"
              title="商品标题"
              thumb="https://img01.yzcdn.cn/vant/ipad.jpeg"
          />
        </router-link>
        <router-link to='list'>
          <van-card
              num="2"
              price="2.00"
              desc="描述信息"
              title="商品标题"
              thumb="https://img01.yzcdn.cn/vant/ipad.jpeg"
          />
        </router-link>
      </van-tab>
      <van-tab title="标签 2">
        <van-card
            num="2"
            price="2.00"
            desc="描述信息"
            title="商品标题"
            thumb="https://img01.yzcdn.cn/vant/ipad.jpeg"
        />
        <van-card
            num="2"
            price="2.00"
            desc="描述信息"
            title="商品标题"
            thumb="https://img01.yzcdn.cn/vant/ipad.jpeg"
        />
      </van-tab>
      <van-tab title="标签 3">
        <van-card
            num="2"
            price="2.00"
            desc="描述信息"
            title="商品标题"
            thumb="https://img01.yzcdn.cn/vant/ipad.jpeg"
        />
      </van-tab>

    </van-tabs>
  </div>
</template>

<script>
import Swipe from '@/components/Swipe'

export default {
  name: 'Home',
  components: {
    Swipe
  },
  data() {
    return {
      value1: 0,
      value2: 'a',
      value: '',
      active: 0,
      option1: [
        {text: '地址地址地址', value: 0},
        {text: '地址地址地址', value: 1},
        {text: '地址地址地址', value: 2},
      ],
    }
  },
  methods: {
    history() {
      this.$router.push('/history')
    }
  },
}
</script>

<style lang="less" >
.home {
  .address-search {
    background-color: #39a9ed;
    display: flex;
    align-items: center;
    justify-content: space-around;

    .address {
      width: 30%;

      .van-dropdown-menu__item {
        background-color: #39a9ed;

        .van-dropdown-menu__title {
          color: #ffffff;
        }
      }
    }

    .van-search {
      background-color: #39a9ed;
    }
  }
  .goods-card {
    margin: 0;
    background-color: #39a9ed;
  }

  .delete-button {
    height: 100%;
  }
}
</style>
